<template>
	<view class="yuyue">
		<view 
			class="week" 
			:class="{'week-selected': item.selected}" 
			v-for="(item, index) in weekList" 
			:key="index"
			@click="onWeekChange(item, index)"
		>
			<view v-if="item.selected" class="week-bg"></view>
			<view>{{ item.week }}</view>
			<view>{{ item.month }}.{{ item.day }}</view>
			<view v-if="!item.selected" class="tiao">
				<view C
					:style="{width: '12rpx', height: '12rpx', borderRadius: '12rpx', backgroundColor: v.isExpire ? '#a9a9a9' : '#fe8520'}" 
					v-for="(v, i) in item.eventList" :key="i">
				</view>
				<!-- <view style="width: 14rpx;background-color: #5fcf2d;"></view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import * as ReservationApi from '@/api/reservation/index.js';
	import StorageUtils from '@/utils/StorageUtils';
	import CacheConfig from '@/config/CacheConfig';
	
	export default {
		props: {
			isClick: {
				type: Boolean,
				default: false,
			},
			currentDate: {
				type: String,
				default: "",
			}
		},
		data() {
			return {
				weekList: []
			}
		},
		mounted() {
			this.getWeekList();
		},
		watch: {
			currentDate: {
				handler(val) {
					console.log("currentDate", val, this.weekList);
					const year = val.getFullYear();
					const month = val.getMonth() + 1;
					const day = val.getDate();
					const index = this.weekList.findIndex(v => v.year == year && v.month == month && v.day == day);
					// console.log("index", index);
					if(index == -1) {
						this.getWeekList(new Date(val), true);
					} else {
						this.weekList.forEach((v, i) => {
							v.selected = (index == i);
						})
					}
				},
				deep: true,
			}
		},
		methods: {
			getWeekList(currentDate = new Date(), isInit = false) {
				let app=this;
				console.log("currentDate", currentDate);
				const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				const currentDay = currentDate.getDay();
				const weekList = Array.from({
					length: 7
				}, (_, i) => {
					const daysFromSunday = i - currentDay;
					const date = new Date(currentDate);
					date.setDate(currentDate.getDate() + daysFromSunday);
					return {
						week: weekdays[date.getDay()],
						year: date.getFullYear(),
						month: (date.getMonth() + 1).toString().padStart(2, '0'),
						day: (date.getDate()).toString().padStart(2, '0'),
						eventList: [],
						selected: currentDate.getDate() == date.getDate(),
					};
				});
				console.log("weekList", weekList);
				this.weekList = weekList;
				if(isInit) {
					this.initData()
				}
			},
			initData() {
				console.log("initData weekList");
				this.weekList.forEach(v => {
					v.eventList = [];
				})
				const startWeek = this.weekList[0];
				const endWeek = this.weekList[6];
				const startTime = `${startWeek.year}-${startWeek.month}-${startWeek.day} 00:00:00`;
				const endTime = `${endWeek.year}-${endWeek.month}-${endWeek.day} 23:59:59`;
				const userInfo = StorageUtils.get(CacheConfig.USER_INFO_KEY);
				const param = {
					userId: userInfo.id,
					current: 1,
					size: 10000,
					searchStart: startTime,
					searchEnd: endTime,
				};
				ReservationApi.getReservationPage(param).then(res => {
					console.log("week-list", res.obj);
					if(!!res.obj && !!res.obj.records) {
						res.obj.records.forEach(v => {
							const date = new Date(v.startTime);
							const year= date.getFullYear();
							const month = date.getMonth() + 1;
							const day = date.getDate();
							const index = this.weekList.findIndex(week => week.year == year && week.month == month && week.day == day);
							// console.log("week-list index", index);
							if(index != -1) {
								const startDate = new Date(v.startTime);
								this.weekList[index].eventList.push({
									...v,
									isExpire: Date.now() > startDate.getTime(),
								});
							}
						})
					}
				})
			},
			onWeekChange(item, index) {
				if(this.isClick) {
					this.$emit('click');
				} else {
					if(this.weekList[index].selected) return;
					this.weekList.forEach(v => {
						v.selected = false;
					})
					this.weekList[index].selected = true;
					this.$emit('change', item);
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.yuyue {
		background-color: #f7aa53;
		display: flex;
		font-size: 24rpx;
		position: relative;
		z-index: 99;
		padding: 15rpx 20rpx;
		text-align: center;
	
		.week {
			width: 100%;
			background-color: #fdeddb;
			border-radius: 20rpx;
			height: 100rpx;
			width: 70rpx;
			padding: 15rpx 0;
			margin: auto;
			position: relative;
			
			
			.week-bg {
				width: 80rpx;
				height: 110rpx;
				background: linear-gradient(to bottom, #ffd996, #ffac53);
				border-radius: 20rpx;
				position: absolute;
				z-index: -1;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%)
			}
				
			.zhou {
				color: #010101;
			}
				
			.riqi {
				color: #737373;
				font-size: 22rpx;
			}
				
			.tiao {
				display: flex;
				margin: 5rpx auto 0;
				padding: 0 5rpx;
				
				view {
					height: 8rpx;
					border-radius: 4rpx;
					margin: 0 auto;
				}
			}
		}
		
		.week-selected {
			background-color: #f98816;
			color: #FFFFFF !important;
		}
	}
</style>